<template>
	<view class="course-item row" :class="{ column: isColumn }" @click="navTo(`/pages/zxhd/info?id=${item.id}`)">
		<view class="item-left"><image class="course-img" :src="item.imgurl" lazy-load></image></view>

		<view class="item-right column">
			<view class="row" >
				<view class="hzbmz center">
					<view class="hzbmz-zt">火热报名中~</view>
				</view>
				<view class="title" style="margin-left: 26rpx;">{{item.title}}</view>
			</view>
			
			<view class="row hdtzb">
				<view>
					<!-- <image class="hdtzimg"  src="/static/images/add.png"></image> -->
					<u-icon name="map" color="#A1A1A1" size="16"></u-icon>
				</view>
				<view class="hdtz">活动地址：{{item.province}}{{item.city}}{{item.area}}{{item.addr}}</view>
			</view>
			
			<view class="row hdtzb">
				<view>
					<u-icon name="clock" color="#A1A1A1" size="16"></u-icon>
				</view>
				<view class="hdtz">活动时间：{{item.sta_time}}-{{item.end_time}}</view>
			</view>

	
		</view>
	</view>
</template>

<script>
export default {
	props: {
		isColumn: {
			// 是否纵向排列图片和文字（true纵向，false则横向）
			type: Boolean,
			default: false
		},

		item: {
			type: Object,
		}
	}
};
</script>

<style scoped lang="scss">
.course-item {
	// display: flex;
	// 纵向排列
	// background: red;
	flex-direction: column;
	width: 100%;
	padding: 30rpx 0;
	// border-bottom: 1rpx solid #f1f1f1;
	.item-left {
		position: relative;
		width: 290rpx;
		height: 160rpx;
		margin-right: 20rpx;
		.course-img {
			width: 420rpx;
			height: 225rpx;
			border-radius: 18rpx;
		}
		.course-time {
			position: absolute;
			bottom: 5rpx;
			right: 5rpx;
			font-size: 22rpx;
			color: #fff;
			background: rgba(51, 51, 51, 0.4);
			border-radius: 20rpx;
			padding: 0 8rpx;
		}
	}

	.item-right {
		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;
		// background: red;
		
		height: 200rpx;
		margin-top: 75rpx;
		padding-left: 5rpx;
		.hzbmz {
			width: 180rpx;
			// height: 30rpx;
			background: #e8e8ff;
			border-radius: 6rpx;
			.hzbmz-zt{
				padding: 5rpx 20rpx;
				// width: 100rpx;
				// height: 17rpx;
				font-size: 18rpx;
				
				font-family: PingFang;
				font-weight: 500;
				color: #6a61ff;
				
				white-space: normal;
			}
			
		}
		.title {
			max-width: 365rpx;
			// height: 70rpx;
			// line-height: 35rpx;
			font-size: 24rpx;
			font-weight: bold;
			// 显示两行，超出部分…显示
			overflow: hidden;
			text-overflow: ellipsis; //显示省略号
			-webkit-line-clamp: 2; //最多2行
			display: -webkit-box;
			-webkit-box-orient: vertical;
			white-space: normal;
		}
		
		.hdtzb{
			margin-top: 16rpx;
			// background: red;
			align-items: center;
			// justify-content: center;
			height: 24rpx;
			.hdtzimg{
				width: 17rpx;
				height: 20rpx;
			}
			.hdtz{
				white-space: normal;
				// width: 196rpx;
				height: 24rpx;
				font-size: 18rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #8B8B8B;
				line-height: 20rpx;
			}
		}

		.info {
			.nickname {
				font-size: 23rpx;
				color: #999;
			}

			.count {
				display: flex;
				align-items: center;
				.iconfont {
					font-size: 23rpx;
					color: #222222;
				}
				.money {
					color: $mxg-color-orange;
					width: 130rpx;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
